/**
 * 功能描述: 数值输入框样式表
 * @author 崔孝楠
 * @date 2022/9/27 17:39
 * @version 1.0
 */
@import '../../style/index.scss';

// 输入框外部容器布局
@mixin input-number-wrapper--layout {
  position: relative;
  width: 100%;
  min-width: 0;
  padding-left: 11px;
  line-height: $line-height-base;
  display: inline-flex;
}

// 内部前置子元素布局
@mixin wrapper-child-before--layout {
  width: 0;
  visibility: hidden;
}

// 输入框外部容器样式
@include b(input-number-wrapper) {
  color: $color-text-primary;
  font-size: $input-font-size;
  background-color: $color-white;
  background-image: none;
  border: $border-base;
  border-radius: $border-radius-base;
  transition: all 0.3s;
  @include input-number-wrapper--layout;
  // 占位符样式
  @include placeholder {
    color: $color-text-placeholder;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 1;
  };
  // 占位符样式
  &:placeholder-shown {
    text-overflow: ellipsis;
  }
  // 悬浮样式
  &:hover {
    border-color: $color-primary;
    border-right-width: 1px !important;
    z-index: 1;
  }
  //聚焦样式
  &:focus, &-focused {
    border-color: $color-primary;
    box-shadow: $input-focus-box-shadow;
    border-right-width: 1px !important;
    outline: 0;
    z-index: 1;
  }
}

// 输入框禁用
@include b(input-number-wrapper-disabled) {
  color: $font-color-disabled-base;
  background-color: $background-color-base;
  border-color: $border-color-base;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  // 禁用悬浮样式
  &:hover {
    border-color: $border-color-base;
    border-right-width: 1px !important;
  }
  // 禁用状态输入框样式
  .#{$namespace}-input[disabled] {
    background: transparent;
  }
}

// 无边框样式
@include b(input-number-wrapper-borderless) {
  &, &:hover, &:focus, &-focused, &-disabled {
    background-color: transparent;
    border: none;
    box-shadow: none;
  }
}

// 内部样式
@include b(input-number-wrapper) {
  // 输入框样式
  > .#{$namespace}-input-number {
    border: none;
    outline: none;
    @include wrapper-child-input--layout;

    &-focused {
      box-shadow: none !important;
    }
  }
  // 前置子元素样式
  &::before {
    content: '\a0';
    @include wrapper-child-before--layout;
  }
}

// 前缀后缀布局
@include b(input-number-prefix) {
  display: flex;
  flex: none;
  align-items: center;

  svg {
    width: $input-font-size;
  }
}

// 前缀布局
@include b(input-number-prefix) {
  margin-right: 4px;
}
